<template>
  <div class="pageSpecialization">
    <div class="form-left"></div>
    <div class="form-right">
      <div class="tab-step">
        <div class="tab-item tab-left" :class="current === 1 ? 'active' : ''" @click="changeTabs(1)">基础设置</div>
        <div class="tab-item tab-right" :class="current === 2 ? 'active' : ''" @click="changeTabs(2)">高级设置</div>
      </div>
      <div class="tab-body">
        <basic-settings v-show="current === 1"></basic-settings>
        <advanced-settings v-show="current === 2"></advanced-settings>
      </div>
    </div>
  </div>
</template>

<script>
  import basicSettings from '@views/menuPage/marketing/lottery/components/pageSpecialization/basicSettings.vue';
  import advancedSettings from '@views/menuPage/marketing/lottery/components/pageSpecialization/advancedSettings.vue';

  export default {
    name: "pageSpecialization",
    components: {
      basicSettings,
      advancedSettings
    },
    data() {
      return {
        current: 1,
      }
    },
    methods: {
      changeTabs(type) {
        this.current = type;
      }
    }
  }
</script>

<style scoped lang="less">
.pageSpecialization{
  display: flex;
  padding: 20px;
  .form-left{
    width: 221px;
    height: 472px;
    background-repeat: no-repeat;
  }
  .form-right {
    width: calc(100% - 221px);
    padding-left: 20px;
    .tab-step{
      display: flex;
      height: 40px;
      line-height: 40px;
      width: 80%;
      margin: 10px auto;
      box-sizing: border-box;
      border-radius: 5px;
      .tab-item{
        width: 50%;
        box-sizing: border-box;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        border: 1px solid #d9d9d9;
        &:last-child{
          margin-left: -1px;
        }
        &:hover{
          color: #1890ff;
          border: 1px solid #1890ff;
        }
        &.active{
          border: 1px solid #1890ff;
          background: #1890ff;
          color: #ffffff;
          &:hover{
            border: 1px solid #40a9ff;
            background: #40a9ff;
          }
        }
      }
      .tab-left{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .tab-right{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
    }
  }
}
</style>
